<template>
  <div class="canvas_box">
    <div class="content_box" id="content_box">
      <div
        style="background-image: linear-gradient(141deg,#33cc88 0%,#1fc8db 51%,#579db7 75%);height: 100%;"
      >
        <ul class="menu">
          <li class="menu-cell" @click="test('11111')">
            <img class="menu-cell__image" src="../../assets/svg-for-middleware/Elasticsearch.svg" />
            <div class="menu-cell__title">Elasticsearch</div>
          </li>
          <li class="menu-cell" @click="test('22222')">
            <img class="menu-cell__image" src="../../assets/svg-for-middleware/Kafka.svg" />
            <div class="menu-cell__title">Kafka</div>
          </li>
          <li class="menu-cell" @click="test('11111')">
            <img class="menu-cell__image" src="../../assets/svg-for-middleware/Elasticsearch.svg" />
            <div class="menu-cell__title">Elasticsearch</div>
          </li>
          <li class="menu-cell" @click="test('33333')">
            <img class="menu-cell__image" src="../../assets/svg-for-middleware/MySQL (1).svg" />
            <div class="menu-cell__title">MySQL (1)</div>
          </li>
          <li class="menu-cell" @click="test('4444')">
            <img class="menu-cell__image" src="../../assets/svg-for-middleware/MySQL.svg" />
            <div class="menu-cell__title">MySQL</div>
          </li>
          <li class="menu-cell" @click="test('555555')">
            <img class="menu-cell__image" src="../../assets/svg-for-middleware/Spark 2.svg" />
            <div class="menu-cell__title">Spark</div>
          </li>
          <li class="menu-cell" @click="test('666666')">
            <img class="menu-cell__image" src="../../assets/svg-for-middleware/logstash.svg" />
            <div class="menu-cell__title">logstash</div>
          </li>
          <li class="menu-cell" @click="test('77777')">
            <img class="menu-cell__image" src="../../assets/svg-for-middleware/neo4j.svg" />
            <div class="menu-cell__title">neo4j</div>
          </li>
          <li class="menu-cell" @click="test('88888')">
            <img class="menu-cell__image" src="../../assets/svg-for-middleware/nginx.svg" />
            <div class="menu-cell__title">nginx</div>
          </li>
          <li class="menu-cell" @click="test('88888')">
            <img class="menu-cell__image" src="../../assets/svg-for-middleware/nginx.svg" />
            <div class="menu-cell__title">nginx</div>
          </li>
          <li class="menu-cell" @click="test('9999')">
            <img class="menu-cell__image" src="../../assets/svg-for-middleware/redis (1).svg" />
            <div class="menu-cell__title">redis</div>
          </li>
          <li class="menu-cell" @click="test('9999')">
            <img class="menu-cell__image" src="../../assets/svg-for-middleware/redis (1).svg" />
            <div class="menu-cell__title">redis</div>
          </li>
          <li class="menu-cell" @click="test('9999')">
            <img class="menu-cell__image" src="../../assets/svg-for-middleware/redis (1).svg" />
            <div class="menu-cell__title">redis</div>
          </li>
          <li class="menu-cell" @click="test('101010')">
            <img class="menu-cell__image" src="../../assets/svg-for-middleware/spring-logo.svg" />
            <div class="menu-cell__title">spring</div>
          </li>
          <li class="menu-cell" @click="test('11111')">
            <img class="menu-cell__image" src="../../assets/svg-for-middleware/采集器.svg" />
            <div class="menu-cell__title">采集器</div>
          </li>
          <li class="menu-cell menu__placeholder"></li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'cssForHive',
  data () {
    return {
    }
  },
  mounted () {
  },
  created () {
  },
  methods: {
    test (val) {
      console.log(val)
    }
  }
}
</script>

<style  scoped>
.canvas_box {
  background-color: #f5f5f5;
}
.content_box {
  margin: 10px auto;
  height: 97%;
  box-shadow: 5px 5px 5px 5px #999;
  width: 98%;
  background-color: #ffffff;
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
.menu {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  justify-content: center;
  align-items: center;
  /* max-width: 1000px; */
  max-width: 90%;
  margin: 0 auto;
  padding: 0;
  -webkit-transform: translateY(34.375px);
  transform: translateY(34.375px);
}
.menu-cell {
  flex: 0 1 170px;
  max-width: 170px;
  height: 100px;
  margin: 40px 7.5px 25px;
  position: relative;
  padding: 0.5em;
  text-align: center;
  /* background: #0a7993; */
  /* background-image: linear-gradient(
    141deg,
    #33cc88 0%,
    #1fc8db 51%,
    #579db7 75%
  ); */
  z-index: 1;
}
.menu-cell::before {
  background: #0a7993;
  -webkit-transform: scale(1.055);
  transform: scale(1.055);
}
.menu-cell::after {
  background: #3ea0eb;
  opacity: 0.5;
  transition: opacity 350ms;
}
.menu-cell::before,
.menu-cell::after {
  content: "";
}
.menu-cell:hover::before {
  background: #0fbee8;
  -webkit-transform: scale(1.055);
  transform: scale(1.055);
}
.menu-cell:hover::after {
  opacity: 0.2;
  transition: opacity 350ms;
}
.menu__placeholder {
  display: none;
  opacity: 0;
  width: 250px;
  margin: 0 12.5px;
}
.menu-cell__image {
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center;
  object-position: center;
  border-style: none;
}
.menu-cell__image {
  width: 70px;
  height: 70px;
  margin-top: -10px;
}
.menu-cell__title {
  height: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
  word-break: break-word;
  text-transform: uppercase;
  color: #fff;
  font-weight: 700;
  font-size: 1.35em;
  transition: opacity 350ms;
}
.menu-cell::before,
.menu-cell::after {
  top: -50%;
  left: 0;
  width: 100%;
  height: 200%;
  display: block;
  position: absolute;
  -webkit-clip-path: polygon(
    50% 0%,
    100% 25%,
    100% 75%,
    50% 100%,
    0% 75%,
    0% 25%
  );
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  z-index: -1;
}
</style>